<template>
    <el-button type="success" @click="dialogVisible = true">新增</el-button>
   <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="编号" width="70" />
    <el-table-column prop="menuName" label="菜单名称" width="120" />
    <el-table-column prop="url" label="菜单Url" width="150" />
    <el-table-column prop="parentName" label="父级菜单名称" width="120" />
    <el-table-column prop="createName" label="创建人" width="120" />
    <el-table-column prop="createTime" label="创建日期" width="190" >
        <template v-slot="scope">
            <span>{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
    </el-table-column>
     <el-table-column prop="updateName" label="修改人" width="120" />
    <el-table-column prop="updateTime" label="修改日期" width="190" >
        <template v-slot="scope">
             <span v-if="scope.row.updateTime ==null"></span>
        <span v-else>{{moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
        </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template v-slot="scope">
        <el-button  type="danger" size="small" @click="getzimenu(scope.row.id)">
          删除
        </el-button>
        <el-button  type="primary" size="small" @click="editmenu(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 新增菜单 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增菜单"
    width="500"
  >
   <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
  <el-form-item label="父级菜单" prop="region">
      <el-select v-model="ruleForm.pid" placeholder="请选择顶级菜单">
     <el-option label="顶级菜单" :value="0" />
     <el-option v-for="a in caiData" :key="a.id" :label="a.parentName" :value="a.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="菜单名称" prop="menuName">
      <el-input v-model="ruleForm.menuName" />
    </el-form-item>
     <el-form-item label="跳转的Url地址" prop="url">
      <el-input v-model="ruleForm.url" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
  <!-- 修改菜单 -->
   <el-dialog
    v-model="dialogVisibleupdate"
    title="修改菜单"
    width="500"
  >
   <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm1"
    :rules="rules1"
    label-width="auto"
  >
  <el-form-item label="父级菜单" prop="region">
      <el-select v-model="ruleForm1.pid" placeholder="请选择顶级菜单" v-if="caiDataLoaded">
        <el-option label="顶级菜单" :value="0" />
        <el-option v-for="a in caiData" :key="a.id" :label="a.parentName" :value="a.id" />
        
      </el-select>
    </el-form-item>
    <el-form-item label="菜单名称" prop="menuName">
      <el-input v-model="ruleForm1.menuName" />
    </el-form-item>
     <el-form-item label="跳转的Url地址" prop="url">
      <el-input v-model="ruleForm1.url" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForms(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { onMounted, ref } from 'vue';
import read from '../../http/AxiosHelper';
import write from '../../http/AxiosHelper1';
onMounted(()=>{
    getmenu();
    getcai();
})
//表格数据
const tableData=ref([]);
const getmenu=()=>{
    read.get("/api/Menu/GetMenu").then(res=>{
       tableData.value=res.data.datas;
    })
}
const dialogVisible=ref(false);
import { reactive} from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  pid: null,
  url: '',
  menuName: '',
})
const rules = reactive({
  menuName: [
    { required: true, message: '菜单名称不能为空', trigger: 'blur' },
  ],
  url: [
    {
      required: true,
      message: '跳转的Url地址不能为空',
      trigger: 'change',
    },
  ],
})
//添加菜单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
       write.post("/api/Menu/AddMenu",ruleForm).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg);
            dialogVisible.value=false;
            ruleForm.menuName="";
            ruleForm.pid=null;
            ruleForm.url="";
            getmenu();
        }
        else{
            ElMessage.error(res.data.msg);
        }
       })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//父级菜单下拉框
const caiData:any=ref([])
const caiDataLoaded=ref(false);
const getcai= async()=>{
    read.get("/api/Menu/GetParentMenu").then(res=>{
        caiData.value=res.data.data;
        caiDataLoaded.value=true;
    })
}
//修改菜单
const dialogVisibleupdate=ref(false);
//反填
const editmenu=(row:any)=>{
    dialogVisibleupdate.value=true;
    ruleForm1.id=row.id;
    ruleForm1.menuName=row.menuName;
    ruleForm1.pid=row.pid;
    ruleForm1.url=row.url;
}
const ruleForm1 = reactive({
    id:'',
  pid: '',
  url: '',
  menuName: '',
})
const rules1 = reactive({
  menuName: [
    { required: true, message: '菜单名称不能为空', trigger: 'blur' },
  ],
  url: [
    {
      required: true,
      message: '跳转的Url地址不能为空',
      trigger: 'change',
    },
  ],
})
//修改菜单
const submitForms = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
       write.put("/api/Menu/UpdateMenu",ruleForm1).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg);
            dialogVisibleupdate.value=false;
            ruleForm1.menuName="";
            ruleForm1.pid="";
            ruleForm1.url="";
            getmenu();
        }
        else{
            ElMessage.error(res.data.msg);
        }
       })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//查询是否有子集
const getzimenu=(id:any)=>{
   ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      read.get("/api/Menu/GetMenuZi",{params:{Id:id}}).then(res=>{
        if(res.data.code==200){
          getmenuzi(id);
        }
        else{
           delmenu(id);
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
//查询是否有子集
const getmenuzi=(id:any)=>{

  ElMessageBox.confirm(
    '改菜单有子集确认删除所有子集及所有子集的子集吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      read.get("/api/Menu/GetMenuZi",{params:{Id:id}}).then(res=>{
        if(res.data.code==200){
          delmenu(id);
        }
        else{
          ElMessage.error("删除失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
//删除方法
const delmenu=(id:any)=>{
  write.put("/api/Menu/DelMenu",{id:id}).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.msg);
      getmenu();
    }
    else{
      ElMessage.error(res.data.msg);
    }
  })
}
</script>

<style scoped>

</style>